<template>
  <div>
    <div class="n-head" :style="{height: initHead}">
      <div class="n-title">
        <img :src="studentMessage.imgUrl" class="n-to" :style="{width: initToWidth,height: initToHeight,borderRadius: initToBorderRadius,shapeOutside: initToShape,borderWidth: initToBorderWidth}"></img>
      </div>
    </div>
    <div class="students-head" :style="{height: initShead}">
      <div class="n-nickName" :style="{paddingTop: initNickNamePaddingTop,fontSize: initNickNameFontSize}">
        <span>{{studentMessage.nickName}}</span>
      </div>
      <div class="n-newsPadding" :style="{width: initNpadWidth,paddingTop: initNpadPaddingTop}">
        <div class="student-news-onder" :style="{fontSize: initOnder}">{{studentMessage.studentPerformance.courseHour}}</div>
        <div class="student-news-down" :style="{paddingLeft: initDownPaddingLeft,fontSize: initDownFontSize}">学习时间(h)</div>
      </div>
      <div class="n-newsPadding" :style="{width: initNpadWidth,paddingTop: initNpadPaddingTop}">
        <div class="student-news-onder" :style="{fontSize: initOnder}">{{studentMessage.studentPerformance.signNum}}</div>
        <div class="student-news-down" :style="{paddingLeft: initDownPaddingLeft,fontSize: initDownFontSize}">听课次数(节)</div>
      </div>
      <div class="n-newsPadding" :style="{width: initNpadWidth,paddingTop: initNpadPaddingTop}">
        <div class="student-news-onder" :style="{fontSize: initOnder}">{{studentMessage.studentPerformance.score}}</div>
        <div class="student-news-down" :style="{paddingLeft: initDownPaddingLeft,fontSize: initDownFontSize}">学员积分(分)</div>
      </div>
    </div>

    <div class="students-title student-news-down" :style="{height: initStitleHeight,lineHeight: initStitleLineHeight,paddingLeft: initDownPaddingLeft,fontSize: initDownFontSize}">参与课程</div> 
    <div class="n-background" v-infinite-scroll="getStudentCourse"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="10" :style="{marginBottom: initGroundMarginBottom}">
      <div class="n-students-height" :style="{height: initStusWidth,marginBottom: initStuHBottom,paddingBottom:initDownFontSize}" v-for="courseInfo in studentCourseList" v-bind:key="courseInfo.id">
        <div class="n-students-advice" :style="{paddingTop: initStuAdvMarginTop,fontSize: initStuAdvFont}">
          <img class="n-img" :style="{width: initNimgWidth,height: initNimgHeight,marginLeft: initNimgMarginLeft,marginRight:initNimgMarginRight}" :src="courseInfo.lecturerImg">{{courseInfo.nickName}}
        </div>
        <div class="n-students" :style="{height: nstuHeight,lineHeight: nstuLingHeight,paddingBottom: nstuPaddingBottom}">
          <img class="img" :src="courseInfo.imgUrl" :style="{width: initImgWidth,paddingLeft: initImgPaddingLeft,paddingTop: initImgPaddingTop,height:initImgHeight}">
        </div>
        <div class="n-students-detail" :style="{paddingTop: initStusDtailTop,paddingLeft:initStusDetailLeft}">
              <div class="n-students-title" :style="{fontSize: initStuTitleFont}">{{courseInfo.name}}</div>
              <div class="n-students-time" :style="{fontSize: initStuTimeFont,marginTop: initStuTimeTop}">时间:{{courseInfo.courseTime}}</div>
              <div class="n-students-lastTime" :style="{fontSize : initStuTimeFont,marginTop: initStuLastTop}"> 地点：{{courseInfo.address}}</div>
        </div>
          <div class="n-students-number" :style="{marginRight:initDownPaddingLeft,marginTop: initStuMarginTop}">
            <div class="n-students-isOpen" :style="{fontSize: initOpenFontSize,marginTop: initStuOpeMarginTop,marginBottom: initStuOpeMarginBottom}">时长{{courseInfo.classHour}}h</div>
            <div class="n-students-num" :style="{fontSize: initStusNuFontSize,marginTop: initStuNuTop}" v-if="courseInfo.buttonType === 0">
              <router-link :to="getStudentCourseHref(courseInfo.id)"><mt-button class="n-students-enter" :style="{width: initEntWidth,height: initEntHeight,borderWidth: initEntBorderWidth,borderRadius: initEntBorderRadius,fontSize: initEntFont}">已报名</mt-button></router-link>
            </div>
            <div class="n-students-num" :style="{fontSize: initStusNuFontSize,marginTop: initStuNuTop}" v-if="courseInfo.buttonType === 1" >
              <router-link :to="getStudentScoreHref(courseInfo.id)"><mt-button class="n-students-score" :style="{width: initEntWidth,height: initEntHeight,borderWidth: initEntBorderWidth,borderRadius: initEntBorderRadius,fontSize: initEntFont}">去评价</mt-button></router-link>
            </div>
            <div class="n-students-num" :style="{fontSize: initStusNuFontSize,marginTop: initStuNuTop}" v-if="courseInfo.buttonType === 2">
              <router-link :to="getStudentEndScoreHref(courseInfo.id)"><mt-button class="n-students-endscore" :style="{width: initEntWidth,height: initEntHeight,borderWidth: initEntBorderWidth,borderRadius: initEntBorderRadius,fontSize: initEntFont}">已评分</mt-button></router-link>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { getStudent } from '@/api/student'
  import { studentCourses } from '@/api/course'
  import { pageSize } from '@/utils/page'
  export default {
    data () {
      return {
        tableData: [],
        total: 0,
        pageNum: 1,
        pageSize: pageSize,
        loading: true,
        startDateAndEndDate: '',
        studentMessage: {},
        studentCourseList: [],
        listQuery: {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
      }
    },
    created () {
      this.getStudentMessage()
      this.getStudentCourse()
    },
    computed: {
      initHead () {
        return this.clientWidth * 100 / 750 + 'px'
      },
      initToWidth () {
        return this.clientWidth * 176 / 750 + 'px'
      },
      initToHeight () {
        return this.clientWidth * 176 / 750 + 'px'
      },
      initToBorderRadius () {
        return this.clientWidth * 100 / 750 + 'px'
      },
      initToShape () {
        return this.clientWidth * 150 / 750 + 'px'
      },
      initToBorderWidth () {
        return this.clientWidth * 8 / 750 + 'px'
      },
      initOnder () {
        return this.clientWidth * 68 / 750 + 'px'
      },
      initDownPaddingLeft () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      initDownFontSize () {
        return this.clientWidth * 24 / 750 + 'px'
      },
      initNpadWidth () {
        return this.clientWidth * 230 / 750 + 'px'
      },
      initNpadPaddingTop () {
        return this.clientWidth * 52 / 750 + 'px'
      },
      initShead () {
        return this.clientWidth * 359 / 750 + 'px'
      },
      initNickNamePaddingTop () {
        return this.clientWidth * 104 / 750 + 'px'
      },
      initNickNameFontSize () {
        return this.clientWidth * 28 / 750 + 'px'
      },
      nstuHeight () {
        return this.clientWidth * 180 / 750 + 'px'
      },
      nstuLingHeight () {
        return this.clientWidth * 180 / 750 + 'px'
      },
      nstuPaddingBottom () {
        return this.clientWidth * 12 / 750 + 'px'
      },
      initImgWidth () {
        return this.clientWidth * 180 / 750 + 'px'
      },
      initImgPaddingLeft () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      initImgPaddingTop () {
        return this.clientWidth * 22 / 750 + 'px'
      },
      initImgHeight () {
        return this.clientWidth * 110 / 750 + 'px'
      },
      initStusDtailTop () {
        return this.clientWidth * 5 / 750 + 'px'
      },
      initStusDetailLeft () {
        return this.clientWidth * 22 / 750 + 'px'
      },
      initStuTitleFont () {
        return this.clientWidth * 35 / 750 + 'px'
      },
      initStuTimeFont () {
        return this.clientWidth * 22 / 750 + 'px'
      },
      initStuNumWidth () {
        return this.clientWidth * 66 / 750 + 'px'
      },
      initStuNumHeight () {
        return this.clientWidth * 96 / 750 + 'px'
      },
      initOpenFontSize () {
        return this.clientWidth * 24 / 750 + 'px'
      },
      initStusNuFontSize () {
        return this.clientWidth * 58 / 750 + 'px'
      },
      initStuHBottom () {
        return this.clientWidth * 15 / 750 + 'px'
      },
      initStitlePaddingTop () {
        return this.clientWidth * 20 / 750 + 'px'
      },
      initStitleHeight () {
        return this.clientWidth * 73 / 750 + 'px'
      },
      initStitleLineHeight () {
        return this.clientWidth * 73 / 750 + 'px'
      },
      initStuAdvMarginTop () {
        return this.clientWidth * 28 / 750 + 'px'
      },
      initStuAdvFont () {
        return this.clientWidth * 24 / 750 + 'px'
      },
      initNimgWidth () {
        return this.clientWidth * 28 / 750 + 'px'
      },
      initNimgHeight () {
        return this.clientWidth * 28 / 750 + 'px'
      },
      initNimgMarginLeft () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      initStusWidth () {
        return this.clientWidth * 206 / 750 + 'px'
      },
      initEntWidth () {
        return this.clientWidth * 108 / 750 + 'px'
      },
      initEntHeight () {
        return this.clientWidth * 108 / 750 + 'px'
      },
      initEntBorderWidth () {
        return this.clientWidth * 2 / 750 + 'px'
      },
      initEntBorderRadius () {
        return this.clientWidth * 8 / 750 + 'px'
      },
      initEntFont () {
        return this.clientWidth * 24 / 750 + 'px'
      },
      initStuOpeMarginTop () {
        return this.clientWidth * -23 / 750 + 'px'
      },
      initStuOpeMarginBottom () {
        return this.clientWidth * 42 / 750 + 'px'
      },
      initStuNuTop () {
        return this.clientWidth * -15 / 750 + 'px'
      },
      initStuMarginTop () {
        return this.clientWidth * -10 / 750 + 'px'
      },
      initNimgMarginRight () {
        return this.clientWidth * 12 / 750 + 'px'
      },
      initStuTimeTop () {
        return this.clientWidth * 18 / 750 + 'px'
      },
      initStuLastTop () {
        return this.clientWidth * 10 / 750 + 'px'
      },
      initGroundMarginBottom () {
        return this.clientWidth * 113 / 750 + 'px'
      }
    },
    methods: {
      getStudentMessage () {
        getStudent(this.listQuery).then(response => {
          this.studentMessage = response.data
        })
      },
      getStudentCourse () {
        this.loading = true
        this.listQuery.pageNum = this.pageNum
        this.listQuery.pageSize = this.pageSize
        this.listQuery.empNo = this.empNo
        let oldStudentCourseList = this.studentCourseList
        studentCourses(this.listQuery).then(response => {
          if (response.data !== null && response.data.length > 0) {
            for (var i in response.data) {
              oldStudentCourseList.push(response.data[i])
            }
            this.studentCourseList = oldStudentCourseList
            this.loading = false
            this.pageNum = this.pageNum + 1
          }
        })
      },
      getStudentCourseHref (id) {
        return '/studentCourse?id=' + id
      },
      getStudentScoreHref (id) {
        return '/studentScore?id=' + id
      },
      getStudentEndScoreHref (id) {
        return '/studentEndScore?id=' + id
      }
    }
  }
</script>

<style lang="less" scoped>
    .n-head{
      background: #00B685;
    }
    .n-title{
      text-align: center;
    }
    .n-to{
      border-color:#ffffff;
      border-style:solid;
    }
    .student-news-onder{
      font-weight: bold;
      color: #5B6175;
      font-family: 微软雅黑;
    }
    .student-news-down{
      color: #5B6175;
      font-weight: bold;
      font-family: 微软雅黑;
    }
    .students-title{
      background: #edeef6;
    }
    .n-newsPadding{
      text-align: center;
      float: left;
    }
    .students-head{
    }
    .n-nickName{
      color: #5B6175;
      text-align: center;
      font-family: 微软雅黑;
    }
    .n-students{
      float: left;
    }
    .n-img {
    border-radius: 50%;
    overflow: hidden;
    }
    .n-students-detail {  
    float: left;
    color: #5b6175;
    }
    .n-students-title {
    font-weight: bold;
    color:#5B6175;
    }
    .n-students-time {
    color:#5B6175;
    }
    .n-students-lastTime {
    color:#5B6175;
    }
    .n-students-number{
      float: right;
    }
    .n-students-isOpen{
      color:#5b6175;
    }
    .n-students-num{
      color:#008AF3;
      font-family: 微软雅黑;
      font-weight: bold;
    }
    .n-students-height{
      background: #ffffff;
    }
    .n-students-advice{
      color: #5B6175;
      font-family: 微软雅黑;
    }
    .n-students-enter{
      border: inside #008AF3 100%;
      opacity: 100%;
      color: #008AF3;
      font-family: 微软雅黑;
    }
    .n-students-score{
      border: inside #00b685 100%;
      opacity: 100%;
      color: #00b685;
      font-family: 微软雅黑;
    }
    .n-students-endscore{
      border: inside #BEBFD7 100%;
      opacity: 100%;
      color: #BEBFD7;
      font-family: 微软雅黑;
    }
</style>
